<template>
  <!-- 动态指令 -->
  <div v-bind:[attributeName]="attributeContent"></div>
  <button @click="change">切换1</button>
  <button @[eventName]="change">切换2</button>

  <!-- 计算属性 -->
  <div>{{ msg }}</div>
  <div>{{ reverseMsg }}</div>

  <!-- 观察者 -->
  <input type="text" v-model="msg" />
  <div>观察者：{{ msg }}</div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      attributeName: "class",
      attributeContent: "d1",
      eventName: "click",
      msg: "helloworld",
    };
  },
  methods: {
    change() {
      this.attributeName = this.attributeName == "class" ? "id" : "class";
    },
  },
  computed: {
    reverseMsg() {
      return this.msg.split("").reverse().join("");
    },
  },
  watch: {
    // 监听值的变化
    msg(newval, oldval) {
      if (newval.length > 10) {
        console.log("太长了！")
      }
    },
  },
};
</script>

<style scoped>
#d1 {
  width: 100px;
  height: 100px;
  background-color: red;
}

.d1 {
  width: 100px;
  height: 100px;
  background-color: black;
}
</style>
